<template>
	<view v-if="bofplaylist.length>0">
		<view class="bfbtm" :class="bofclassIndex==2?'bfbtm2':'bfbtm1'">
			<view class="mt-16 flex-col section_15 bgmohu"
				@click="go('/pages4/bofangye/bofangye?id='+bofplaylist[bofplayIndex].Id)">
				<view class="flex-row justify-between items-center">
					<view class="flex-row items-center">
						<view class="flex-col mr-15-5">
							<view v-if="bofplaylist[bofplayIndex]" class="flexalign">
								<view class="flex-row flexcenter items-center group_8" style="display: flex;flex-direction: column;float: left;">
									<image class="image_18" :src="getUrl(bofplaylist[bofplayIndex].ImgUrl)" />
									<text class="font_4 text_20" style="margin-top: 16rpx;">{{bofplaylist[bofplayIndex].Name}}</text>
								</view>
								<!-- <view class="flex-row">
									<text class="font_4 text_20">{{bofplaylist[bofplayIndex].Name}}</text>
								</view> -->
							</view>
						</view>
					</view>
					<view class="flex-row items-center group_11">
						<image class="image_20" :src="newfwqUrl+'bofangpause.png'" v-if="bofplayState"
							@click.stop="bofplay" />
						<image class="image_20" :src="newfwqUrl+'08c3b447f32025a324f1244926c586f2.png'" v-else
							@click.stop="bofpause" />
						<!-- 切换歌曲 -->	
						<image class="image_20" style="margin-left: 47rpx;width: 31rpx;height: 31rpx;" src="/static/jishiimg/xiayishou.png" @click.stop="qiehuan" />
						<!-- 播放列表 -->
						<image class="image_21" style="width: 42rpx;height: 33rpx;" :src="newfwqUrl+'6161e70badea3b9c494cd2fcf2a4046.png'" @click.stop="open" />
					</view>
				</view>
			</view>
		</view>
		<!-- <u-mask :show="openShow" @click="openShow = false"></u-mask> -->
		<u-popup v-model="gengduo_popshow" mode="bottom" length="auto" border-radius="32" class="upopup2">
			<view>
				<view class="gengduo">
					<view class="flex-col justify-start relative page">
						<view class="flex-col justify-start section">
							<view class="flex-col section_8">
								<text class="self-center font text_3">播放列表</text>
								<view class="flex-col self-stretch group_6">
									<view class="flex-row justify-between items-center">
										<view class="flex-row items-center">
											<image class="shrink-0 image_10" :src="getUrl(bofplaylist[bofplayIndex].ImgUrl)" />
											<view class="flex-col shrink-0 group_7 ml-9-5">
												<text class="self-stretch font text_4">{{bofplaylist[bofplayIndex].Name}}</text>
												<text class="self-start text_6 mt-16-5">{{bofplaylist[bofplayIndex].Intro}}</text>
											</view>
										</view>
										<view class="flex-col justify-start items-center text-wrapper"
											@click="go('/pages4/huiyuanye/huiyuanye')"
											v-if="bofplaylist[bofplayIndex].FreeType>0 && userInfo.GradeJibie>0">
											<text class="font_2 text_5">开通会员</text>
										</view>
									</view>
									<view class="flex-row equal-division mt-13">
										<view class="flex-col items-center group_8 equal-division-item"
											@click="setuserplaylist(bofplaylist[bofplayIndex])">
											<image class="image_11" src="/static/jishiimg/bofang_10.png" />
											<text class="font_2 text_7 mt-13-5">添加到播放列表</text>
										</view>
										<view class="flex-col items-center group_8 equal-division-item"
											@click="gengduo_popshow=false,dingshi_popshow = true">
											<image class="image_11" src="/static/jishiimg/bofang_9.png" />
											<text class="font_2 text_7 mt-13-5">定时关闭</text>
										</view>
										<!-- <view class="flex-col items-center group_8 equal-division-item">
											<image class="image_11" src="/static/jishiimg/bofang_6.png" />
											<text class="font_2 text_7 mt-13-5">分享</text>
										</view> -->
									</view>
								</view>
								<view class="flex-col self-stretch group_9">
									<scroll-view scroll-y="true" style="height: 300rpx;">
										<view>
											<view class="mb-16 flex-row justify-between items-center"
												v-for="(it,index) in bofplaylist" :key="index">
												<view class="flex-row items-center">
													<image class="shrink-0 image_12"
														src="/static/jishiimg/bofang_11.png" />
													<text class="font_2 ml-13">{{it.Name}}</text>
												</view>
												<image class="image_13" src="/static/jishiimg/bofang_8.png"
													@click="removeuserplaylist(index)" />
											</view>
										</view>
									</scroll-view>
		
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="dingshi_popshow" mode="bottom" length="auto" border-radius="32" class="upopup2">
			<view class="dingshi">
				<view class="flex-col section_8">
					<text class="self-center font">定时关闭</text>
					<view class="flex-row justify-between self-stretch group_7">
						<view class="flex-row items-center">
							<image class="shrink-0 image_13" src="/static/jishiimg/dingshigb.png" />
							<text
								class="font ml-15-5">定时：{{dingsho_hour>0? dingsho_hour+'小时':''}}{{dingsho_minute}}分钟</text>
						</view>
						<u-switch v-model="dingsho_checked" @change="dingshocheckedFun" active-color="#008FD7"
							inactive-color="rgba(0,143,215,0.2)"></u-switch>
					</view>
					<text class="self-start font_2 text_3">选择时间</text>
					<view class="flex-row self-stretch group_8">
						<view @click="dingsho_change(0)"
							:class="'flex-col justify-start items-center text-wrapper'+(dingsho_index==0?'':'_2')">
							<text class="font_2">15分钟</text>
						</view>
						<view @click="dingsho_change(1)"
							:class="'flex-col justify-start items-center ml-9-5 text-wrapper'+(dingsho_index==1?'':'_2')">
							<text class="font_2">30分钟</text>
						</view>
						<view @click="dingsho_change(2)"
							:class="'flex-col justify-start items-center ml-9-5 text-wrapper'+(dingsho_index==2?'':'_2')">
							<text class="font_2 text_4">1小时</text>
						</view>
						<view @click="dingsho_change(3)"
							:class="'flex-col justify-start items-center ml-9-5 text-wrapper'+(dingsho_index==3?'':'_2')">
							<text class="font_2">1小时以上</text>
						</view>
					</view>
					<view class="flex-col self-stretch group_9" v-if="pickshow">
						<text class="self-start font_2 text_5">自定义时间</text>
						<!-- 改了uview1.0源码 u-picker2 -->
						<u-picker3 mode="time" v-model="pickshow" :params="params" class="upicker2"
							@confirm="confirmtime" cancel-color="#e5e5e5" confirm-color="#8FE4FF"></u-picker3>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import commonUtil from'@/common/commonUtil.js';
	// Vue.mixin(commonUtil)
	export default {

		data() {
			return {
				bofplayState: null,
				bofinnerAudioContext: {},
				bofplayIndex: null,
				thispage: {},
				bofplaylist: {},
				bofplayModel: 0,
				openShow:false,
				gengduo_popshow:false,
				dingshi_popshow:false,
				dingsho_checked: false, //定时开关
				dingsho_index: 0, //定时选择
				dingsho_hour: 0, //定时-小时
				dingsho_minute: 15, //定时-分钟
				pickshow: false, //定时-自定义时间
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: true,
					second: false,
					timestamp: true, // 1.3.7版本提供
				},
			}
		},
		mixins:[commonUtil],
		props: {
			//播放样式
			bofclassIndex: {
				type: String,
				default: 1
			},
		},
		watch: {

		},
		created() {

		},
		mounted() {
			// var pages = getCurrentPages(); //获取所有页面栈实例列表
			 setTimeout(() => {
			      console.log('500ms后执行的方法');
				  this.huoqushuju()
			    }, 500);
			
			// this.thispage = pages[pages.length - 1]; //当前页面实例
			// console.log('组件初始化',this.thispage.$vm.innerAudioContextList)
		},
		methods: {
			
			// 打开播放列表
			open(){
				// console.log('我被点击了')
				this.gengduo_popshow = true
				this.huoqushuju()
			},
			// 选择定时时间
			dingsho_change(index) {
				this.dingsho_index = index
				this.dingsho_hour = (index == 2 ? 1 : 0)
				this.dingsho_minute = (index == 0 ? 15 : index == 1 ? 30 : 0)
				if (index == 3) {
					this.pickshow = true
				}
			},
			// 自定义时间
			confirmtime(e) {
				console.log('confirm', e)
				this.dingsho_hour = e.hour
				this.dingsho_minute = e.minute
			},
			dingshocheckedFun() {
				console.log('dingshochecked', this.dingsho_checked)
				if (this.dingsho_checked) this.dingshifun()
			},
			
			dingshifun() {
				// 清除定时器
				if (this.timeoutID) clearTimeout(this.timeoutID);
				var time = (this.dingsho_hour * 60 + this.dingsho_minute) * 60 * 1000
				// 设置一个time毫秒后执行的定时器
				this.timeoutID = setTimeout(function() {
					// this.innerAudioContext.pause();
					// this.bofinnerAudioContext.pause()
					this.bofpause()
				}, time);
			},
			// 获取数据
			huoqushuju() {
				var pages = getCurrentPages(); //获取所有页面栈实例列表
				this.thispage = pages[pages.length - 1]; //当前页面实例
				this.bofplayIndex = this.userplayIndex ?  this.userplayIndex : uni.getStorageSync('userplayIndex') >= uni.getStorageSync("userplaylist").length? 0:uni.getStorageSync('userplayIndex')
				this.bofplayState = this.thispage.$vm.innerAudioContext_State
				this.bofplaylist = uni.getStorageSync("userplaylist")
				this.bofplayModel = this.thispage.$vm.innerAudioContextModel
				this.bofinnerAudioContext = this.thispage.$vm.innerAudioContext
				console.log('我进来',uni.getStorageSync('userplayIndex'),uni.getStorageSync("userplaylist").length,this.thispage.$vm.innerAudioContext_State)
				if(this.bofplaylist[this.bofplayIndex]){
					this.bofinnerAudioContext.src = this.bofplaylist[this.bofplayIndex].Url
				}
				
			},
			qiehuan(){
				// this.qiehuanClick(1)
				// this.huoqushuju()
				this.bofpause()
				if (this.bofplayIndex + 1 == this.bofplaylist.length) {
					this.bofplayIndex = 0
				} else {
					this.bofplayIndex = this.bofplayIndex + 1
				}
				uni.setStorageSync("userplayIndex", this.bofplayIndex)
				this.bofinnerAudioContext.src = this.bofplaylist[this.bofplayIndex].Url
				// this.bofinnerAudioContext = this.bofplaylist[this.bofplayIndex]
				// this.mdata = this.bofplaylist[this.bofplayIndex]
				this.bofplay()
			},
			bofplay() {
				this.bofinnerAudioContext.play()
				this.bofplayState = false
				this.innerAudioContext_State = false
				this.bofangzujianemit(this.bofplayState)
				uni.setStorageSync('wanzhuanshengyin',-1)
				this.Indexbofang(true)
			},
			bofpause() {
				this.bofinnerAudioContext.pause()
				this.bofplayState = true
				this.innerAudioContext_State = true
				this.bofangzujianemit(this.bofplayState)
			},
		}
	}
</script>

<style lang="less">
	.bowanClass {
		opacity: 0.4;
	}

	.bfbtm1 {
		position: fixed;
		bottom: calc(0rpx + env(safe-area-inset-bottom));
		width: 100%;
		z-index: 120;
		left: 0;
	}

	.bfbtm2 {
		position: fixed;
		bottom: calc(120rpx + env(safe-area-inset-bottom));
		width: 100%;
		left: 0;
		z-index: 120;
	}

	.mt-7 {
		margin-top: 14rpx;
	}

	.mr-15-5 {
		margin-right: 31rpx;
	}

	.ml-19-5 {
		margin-left: 39rpx;
	}

	.mt-7-5 {
		margin-top: 15rpx;
	}

	.section_15 {
		box-shadow: 0px 2px 10px 1px rgba(0, 37, 68, 0.6);
		// margin: 0 38rpx;
		padding: 24rpx 75rpx 24rpx 86rpx;
		// border-radius: 32rpx;
		background-color: #003460 !important; 

		.group_8 {
			padding: 0 4rpx;

			.image_18 {
				width: 56rpx;
				height: 56rpx;
			}

			.image_19 {
				width: 33rpx;
				height: 30rpx;
			}
		}

		.font_4 {
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 24rpx;
			height: 24rpx;
			color: #ffffff;
			max-width: 200rpx;
			overflow: hidden;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}

		.text_20 {
			line-height: 22.12rpx;
		}

		.image_20 {
			width: 42rpx;
			height: 42rpx;
			padding: 6rpx;
			box-sizing: initial;
		}

		.group_11 {
			margin-right: 2rpx;

			.image_21 {
				width: 14rpx;
				height: 22rpx;
				margin-left: 47rpx;
			}
		}

		.group_12 {
			padding-left: 6rpx;

			.image_22 {
				width: 24rpx;
				height: 19rpx;
			}

			.section_16 {
				margin-left: 12rpx;
				background-color: #31567d;
				border-radius: 5rpx;
				height: 7rpx;
				border-left: solid 112rpx #008fd7;
			}
		}
	}
	
	.upopup2 {
		/deep/ .u-drawer-bottom {
			background-color: initial !important;
		}
	}
	
	.gengduo {
		.ml-5 {
			margin-left: 10rpx;
		}
	
		.ml-9-5 {
			margin-left: 19rpx;
		}
	
		.mb-16 {
			margin-bottom: 32rpx;
		}
	
		.mt-16-5 {
			margin-top: 33rpx;
		}
	
		.mt-13 {
			margin-top: 26rpx;
		}
	
		.mt-13-5 {
			margin-top: 27rpx;
		}
	
		.ml-13 {
			margin-left: 26rpx;
		}
	
		.page {
	
			.group {
				margin-left: 34rpx;
				margin-right: 30rpx;
	
				.group_2 {
					padding-left: 34rpx;
	
					.text {
						color: #ffffff;
						font-size: 30rpx;
	
						line-height: 22.76rpx;
					}
	
					.image {
						width: 34rpx;
						height: 21rpx;
					}
	
					.image_2 {
						width: 31rpx;
						height: 22rpx;
					}
	
					.image_3 {
						width: 49rpx;
						height: 22.68rpx;
					}
				}
	
				.group_3 {
					margin-top: 52rpx;
	
					.image_4 {
						width: 18rpx;
						height: 34rpx;
					}
	
					.pos_2 {
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
	
					.text_2 {
						color: #ffffff;
						font-size: 36rpx;
	
						line-height: 33.54rpx;
					}
				}
	
				.section_2 {
					margin-top: 96rpx;
					padding-bottom: 19rpx;
					background-color: #ffffff38;
					border-radius: 40rpx;
					box-shadow: 0rpx 3rpx 31rpx #e1e1e1bf;
					width: 551rpx;
	
					.section_3 {
						padding: 54rpx 50rpx 43rpx;
						background-color: #ffffff00;
						border-radius: 40rpx;
						box-shadow: 0rpx 3rpx 6rpx #00000029;
						backdrop-filter: blur(46rpx);
						width: 551rpx;
	
						.section_4 {
							padding: 397rpx 0 4rpx;
							background-color: #ffffffd0;
							border-radius: 50%;
	
							.image_6 {
								margin-left: 13rpx;
								width: 43rpx;
								height: 43rpx;
							}
	
							.section_5 {
								background-color: #979797;
								box-shadow: 0rpx 4rpx 9rpx #16486bdb;
								border-radius: 50%;
								width: 389rpx;
	
								.image-wrapper {
									// background-image: url('/static/jishiimg/c8a10ad0a12b16ede4d40f88224b9d3d.png');
									background-size: 100% 100%;
									background-repeat: no-repeat;
									width: 389rpx;
	
									.image_5 {
										width: 389rpx;
										height: 390rpx;
									}
								}
							}
	
							.pos_3 {
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
	
							.image_7 {
								width: 42rpx;
								height: 43rpx;
							}
	
							.pos_5 {
								position: absolute;
								right: 14rpx;
								bottom: 4rpx;
							}
	
							.group_4 {
								width: 451rpx;
	
								.section_6 {
									background-color: #ffffff7d;
									border-radius: 50%;
									width: 8rpx;
									height: 8rpx;
								}
	
								.section_7 {
									background-color: #ffffff7d;
									border-radius: 50%;
									width: 8rpx;
									height: 7rpx;
								}
							}
	
							.pos_4 {
								position: absolute;
								left: 0;
								right: 0;
								top: 397rpx;
							}
	
							.pos_6 {
								position: absolute;
								left: 0;
								right: 0;
								top: 409rpx;
							}
	
							.pos_7 {
								position: absolute;
								left: 0;
								right: 0;
								top: 421rpx;
							}
	
							.pos_8 {
								position: absolute;
								left: 0;
								right: 0;
								top: 432rpx;
							}
						}
	
						.group_5 {
							padding: 4rpx 13rpx;
	
							.image_8 {
								width: 43rpx;
								height: 7rpx;
							}
	
							.image_9 {
								width: 42rpx;
								height: 7rpx;
							}
						}
					}
				}
			}
	
			.section {
	
				.section_8 {
					padding: 54rpx 32rpx 62rpx;
					background-color: #003460;
					border-radius: 32rpx 32rpx 0rpx 0rpx;
	
					.font {
						font-size: 32rpx;
						font-family: PingFang SC;
						color: #ffffff;
					}
	
					.text_3 {
						line-height: 29.58rpx;
					}
	
					.group_6 {
						margin-top: 52rpx;
	
						.image_10 {
							border-radius: 32rpx;
							width: 152rpx;
							height: 152rpx;
						}
	
						.group_7 {
							// width: 254.58rpx;
	
							.text_4 {
								line-height: 42rpx;
							}
	
							.text_6 {
								color: #959595;
								font-size: 23rpx;
	
								line-height: 16.94rpx;
							}
						}
	
						.text-wrapper {
							padding: 14rpx 0;
							background-color: #008fd7;
							border-radius: 26rpx;
							width: 157rpx;
							height: 51rpx;
	
							.text_5 {
								line-height: 24.02rpx;
							}
						}
	
						.equal-division {
	
	
							.group_8 {
								flex: 1 1 200.44rpx;
	
								.image_11 {
									width: 48rpx;
									height: 48rpx;
								}
	
								.text_7 {
									line-height: 24.18rpx;
								}
							}
	
							.equal-division-item {
								padding: 12rpx;
							}
						}
					}
	
					.group_9 {
						margin-top: 62rpx;
	
						.image_12 {
							width: 40rpx;
							height: 37rpx;
						}
	
						.image_13 {
							width: 30rpx;
							height: 30rpx;
						}
					}
	
					.font_2 {
						font-size: 26rpx;
						font-family: PingFang SC;
						line-height: 24.14rpx;
						color: #ffffff;
					}
				}
			}
		}
	}
	
	.dingshi {
		.ml-15-5 {
			margin-left: 31rpx;
		}
	
		.ml-9-5 {
			margin-left: 19rpx;
		}
	
		.section_8 {
			padding: 54rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));
			background-color: #003460;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
	
			.font {
				font-size: 32rpx;
				font-family: PingFang SC;
				line-height: 29.76rpx;
				color: #ffffff;
			}
	
			.group_7 {
				margin-top: 54rpx;
	
				.image_13 {
					width: 45rpx;
					height: 45rpx;
				}
	
				.image_14 {
					width: 76rpx;
					height: 46rpx;
				}
			}
	
			.font_2 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 25.78rpx;
				color: #ffffff;
			}
	
			.text_3 {
				margin-top: 62rpx;
			}
	
			.group_8 {
				margin-top: 44rpx;
	
				.text-wrapper {
					padding: 14rpx 0;
					flex: 1 1 157rpx;
					background-color: #008fd7;
					border-radius: 15rpx;
					height: 54rpx;
				}
	
				.text-wrapper_2 {
					flex: 1 1 157rpx;
					padding: 14rpx 0;
					background-color: #008fd74f;
					border-radius: 15rpx;
					height: 54rpx;
	
					.text_4 {
						line-height: 25.62rpx;
					}
				}
			}
	
			.group_9 {
				margin-top: 44rpx;
				flex-wrap: wrap;
	
				.text_5 {
					margin-left: 4rpx;
					line-height: 26.04rpx;
					margin-bottom: 32rpx;
				}
	
				.text_6 {
					margin-left: 214rpx;
					margin-top: 36rpx;
					color: #ffffff;
					font-size: 26rpx;
					font-family: PingFang SC;
					line-height: 23.94rpx;
				}
	
				.group_10 {
					margin-top: 19rpx;
					padding: 18rpx 0;
	
					.section_10 {
						background-color: #1e4167;
						border-radius: 7rpx;
	
						.section_11 {
							background-color: #008fd7;
							border-radius: 7rpx;
							width: 259rpx;
							height: 13rpx;
						}
					}
	
					.section_9 {
						background-color: #ffffff;
						border-radius: 50%;
						height: 48rpx;
						border-left: solid 6rpx #008fd7;
						border-right: solid 6rpx #008fd7;
						border-top: solid 6rpx #008fd7;
						border-bottom: solid 6rpx #008fd7;
					}
	
					.pos_10 {
						position: absolute;
						left: 231rpx;
						right: 407.24rpx;
						top: 0;
					}
				}
			}
		}
	}
</style>